<template >
	<div class="box" style="width: 100vw;height: calc(100vh -80px);background-color: #f3f4f7;box-sizing: border-box; ">
		<div class="login">
			<!-- <div class="header">
			<div class="w1200">
				<a href="index.html"><img src="static/picture/logo.png"></a>
			</div>
		</div> -->
			<div class="login_con">
				<div class="w1200">
					<img src="../../assets/picture/login_img.png" class="loginImg">
					<div class="input">
						<h3>忘记密码</h3>
						<p class="tel">
							<i></i>
							<input type="text" v-model="tel" id="mobile" placeholder="请输入您的手机号">
						</p>
						<p class="yzm">
							<i></i>
							<input type="text" id="yanzhengma" v-model="code" placeholder="请输入验证码" class="inputCode">
							<input @click="codeText == '获取验证码'?getCode():''" type="button" :value="codeText" class="getCode">
							<!-- <el-button @click = "getCode" type="primary" :loading="codeLoading">{{ codeText }}</el-button> -->
						</p>
						<p class="setPwd">
							<i></i>
							<input v-model="password" type="password" id="regPwd" placeholder="请设置新密码">
						</p>
						<p class="setPwd">
							<i></i>
							<input v-model="newpassword" type="password" id="conPwd" placeholder="请再次确认新密码">
						</p>
						<input @click = "submit" type="submit" name="nextStep" id="nextStep" class="nextStep" value="重置密码">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
export default {
	name: "tem",
	mixins: [pagePublic],
	data() {
		return {
			tel: '',
			interval:'',
			key:'',
			code:'',
			password:'',
			newpassword:'',
			codeText:'获取验证码',
			// urls:{
			//     list: {
			//         url:this.$api.tem.list,
			//         method:"get",
			//         sync:false,
			//     },
			//     add:this.$api.tem.add,
			//     edit:this.$api.tem.edit,
			//     del:this.$api.tem.del
			// },


		}
	},
	computed: {
		...mapState(['configInfo']),

	},
	created() {

	},
	methods: {
		...mapMutations(['set_configInfo']),
		getCode() {
			if (!this.tel) {
				return this.$message({
					message: '请输入手机号',
					type: 'error'
				})
			}
			let reg = /^1[3456789]\d{9}$/
			if (!reg.test(this.tel)) {
				return this.$message({
					message: '请输入正确的手机号',
					type: 'error'
				})
			} else {
				this.$api.sendSms({ mobile: this.tel}).then((res) => {
					if (res.status == 200) {
						this.$message({
							message: res.msg,
							type: 'success'
						})
						this.key = res.key
						let time = 60
						this.codeText = `${time}s后获取`
						this.interval = setInterval(() => {
							time--;
							if (time == 0) {
								this.codeText = '获取验证码'
								clearInterval(this.interval);
							} else {
								this.codeText = `${time}s后获取`
							}
						}
							, 1000)
					} else {
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})

			}

		},
		submit() {
			if(this.tel&&this.code&&this.newpassword&&this.password){
				this.$api.resetPwd({
					mobile:this.tel,
                    code:this.code,
                    password:this.password,
                    newpassword:this.newpassword,
                    key:this.key
				}).then(()=>{
					if(res.status == 200){
						this.$message({
							message: '修改成功！',
							type:'success'
						})
						this.$router.push('/login')
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
			}else{
				this.$message({
                    message: '请填写完整信息！',
                    type: 'error'
                })
			}
			
		}
	}
}
</script>
<style lang="scss" scoped>
/*登录页*/
.login {
	width: 100%;
}

.login .header {
	background: #fff;
	padding: 16px 0;
}

.login .header a {
	display: block;
	height: 60px;
}

.login .header a img {
	height: 100%;
}

.login .login_con {
	// height: 768px;
	background: #f3f4f7;
}

.login .loginImg {
	margin: 136px 0 0 96px;
}

.login .input {
	width: 370px;
	height: 600px;
	padding: 0 53px;
	margin: 58px 60px 0 0;
	background: url(../../assets/image/login_bg1.png);
	background-size: 100% 100%; 
	float: right;
}

.login .input h3 {
	font-size: 30px;
	color: var(--bg-color, '#FF6900');
	padding: 58px 0 56px;
	letter-spacing: 1px;
	text-align: center;
}

.login .input p {
	border: 1px solid #eaeaea;
	height: 46px;
	border-radius: 4px;
	margin-bottom: 30px;
	display: flex;
}

.login .input .mb20 {
	margin-bottom: 20px;
}

.login .input select {
	border: 1px solid #eaeaea;
	height: 42px;
	border-radius: 4px;
	margin-bottom: 20px;
	text-align: center;
	color: #757575;
	width: 100%;
	font-size: 15px;
}

.login .input p i {
	display: block;
	width: 34px;
	height: 24px;
	margin: 11px 0;
	border-right: 1px solid #eaeaea;
}

.login .input p input[type="text"],
input[type="Password"] {
	border: 0;
	text-indent: 10px;
	outline: 0;
}

.login .input p.tel i {
	background: url(../../assets/image/login_tel.png)no-repeat center center;
}

.login .input p.yzm {
	position: relative;
}

.login .input p.yzm i {
	background: url(../../assets/image/login_yzm.png)no-repeat center center;
}

.login .input p.setPwd i {
	background: url(../../assets/image/login_pwd.png)no-repeat center center;
}

.login .input input[type="submit"] {
	width: 100%;
	height: 46px;
	background: var(--bg-color, '#FF6900');
	color: #fff;
	font-size: 22px;
	border-radius: 26px;
	border: 0;
	box-shadow: 0 3px 6px var(--bg-color, '#FF6900');
}

.login .input input[type="submit"]:hover {
	opacity: .9;
	cursor: pointer;
}

.login .input .autologin {
	margin-bottom: 20px;
}

.login .input .autologin input[type="checkbox"] {
	margin-right: 6px;
	position: relative;
	top: 1px;
}

.login .input .autologin a {
	color: var(--bg-color, '#FF6900');
}

.login .input .autologin a:hover {
	text-decoration: underline;
}

.login .input .agree {
	display: flex;
	margin-bottom: 20px;
}

.login .input .agree input[type="checkbox"] {
	margin-right: 6px;
	position: relative;
	top: 3px;
}

.login .input .agree a {
	color: var(--bg-color, '#FF6900');
}

.login .input .agree a:hover {
	text-decoration: underline;
}

.login .input .getCode {
	width: 120px;
	height: 48px;
	color: var(--bg-color, '#FF6900');
	font-size: 16px;
	float: right;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	position: absolute;
	right: -1px;
	top: -1px;
}

.login .input .getCode:hover {
	background: var(--bg-color, '#FF6900');
	color: #fff;
	cursor: pointer;
}

.login .input .aBotm {
	display: block;
	color: var(--bg-color, '#FF6900');
	text-align: center;
	margin-top: 26px;
}

.login .input .aBotm:hover {
	text-decoration: underline;
}

@media (max-width:768px) {

	html,
	body {
		min-width: auto;
		background: #fff;
	}

	.login {
		width: 100%;
		height: 100%;
	}

	.login .w1200 {
		width: 100%;
	}

	.login .header {
		padding: 46px 0 36px;
	}

	.login .header a {
		text-align: center;
	}

	.login .login_con {
		height: auto;
		background: #fff;
	}

	.login .input {
		float: none;
		background: #fff;
		width: 92%;
		height: auto;
		padding: 0;
		margin: 0 auto;
	}

	.login .input .getCode {
		border-color: #e2e2e2
	}

	.login .input p {
		border-color: #e2e2e2;
	}

	.login .loginImg {
		display: none;
	}

	.login .input h3 {
		display: none;
	}

	.footer {
		display: none;
	}
}</style>